<template>
  <div class="rank">
    <div class="rank-chart" ref="rank_chart">
    </div>
  </div>
</template>

<script>
  export default {
    name: "Rank",
    data() {
      return {
        chartInstance: null,
        allData: null,
        startValue: 0,
        endValue: 9,
        timerId: null
      }
    },
    created() {
      this.$socket.registerCallback("rankData", this.getChartData)
    },
    mounted() {
      this.initChart()
      // this.getChartData()
      this.$socket.send({
        action: 'getData',
        socketType: 'rankData',
        chartName: 'rank',
        value: ''
      })
      window.addEventListener("resize", this.screenAdapter)
      this.screenAdapter()
    },
    destroyed() {
      window.removeEventListener('resize', this.screenAdapter)
      this.$socket.unRegisterCallback("rankData")
      clearInterval(this.timerId)
    },
    methods: {
      initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.rank_chart, "chalk")
        const initOperation = {
          title: {
            text: '▍地区销售排行',
            left: 20,
            top: 20
          },
          grid: {
            top: '40%',
            left: '5%',
            right: '5%',
            bottom: '13%',
            containable: true
          },
          tooltip: {
            show: true
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: 'bar'
            }
          ]
        }
        this.chartInstance.setOption(initOperation)
        this.chartInstance.on('mouseover', () => clearInterval(this.timerId))
        this.chartInstance.on('mouseout', () => this.startInterval())
      },
      getChartData(ret) {
        // const {data: ret} = await this.$http.get('/rank')
        this.allData = ret.sort((a, b) => b.value - a.value)
        this.updateChart()
        this.startInterval()
      },
      updateChart() {
        const colorArr = [
          ['#0BA82C', '#4FF778'],
          ['#2E72BF', '#23E5E5'],
          ['#5052EE', '#AB6EE5']
        ]
        const provinceArr = this.allData.map(item => item.name)
        const valueArr = this.allData.map(item => item.value)
        const dataOption = {
          xAxis: {
            data: provinceArr
          },
          dataZoom: {
            show: false,
            startValue: this.startValue,
            endValue: this.endValue
          },
          series: [
            {
              data: valueArr,
              itemStyle: {
                color: (arg) => {
                  let targetArr
                  if (arg.value > 300) {
                    targetArr = colorArr[0]
                  } else if (arg.value > 200) {
                    targetArr = colorArr[1]
                  } else {
                    targetArr = colorArr[2]
                  }
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: targetArr[0]}, {offset: 1, color: targetArr[1]}
                  ])
                }
              }
            }
          ]
        }
        this.chartInstance.setOption(dataOption)
      },
      screenAdapter() {
        const titleFontSize = this.$refs.rank_chart.offsetWidth / 100 * 3.6
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize
            }
          },
          series: [
            {
              barWidth: titleFontSize,
              itemStyle: {
                barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0]
              }
            }
          ]
        }
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
      },
      startInterval() {
        if (this.timerId) {
          clearInterval(this.timerId)
        }
        this.timerId = setInterval(() => {
          this.startValue++
          this.endValue++
          if (this.endValue > this.allData.length) {
            this.startValue = 0
            this.endValue = 9
          }
          this.updateChart()
        }, 2000)
      }
    }
  }
</script>